<template>
  <el-drawer
    :close-on-press-escape="false"
    v-model="visible"
    size="100%"
    title="详细信息"
    :with-header="false"
    @close="handleClose"
  >
    <div class="station-drawer">
      <div class="map-box">
        <StationMap ref="stationMapRef" @location="handleLocation" />
      </div>
      <div class="form-box">
        <div class="form-header">
          <h4>详细信息</h4>
          <div class="buttons" v-if="pageType == 'edit' || pageType == 'add'">
            <el-button plain @click="handleEdit(null)">取消</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </div>
          <div class="buttons" v-else-if="pageType == 'view'">
            <el-tooltip content="编辑" placement="top">
              <el-button
                v-if="auditType == 0"
                type="primary"
                icon="Edit"
                circle
                @click="handleEdit('edit')"
              />
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button
                v-if="auditType == 0"
                type="danger"
                icon="Delete"
                circle
                @click="handleDelete"
              />
            </el-tooltip>

            <el-button plain @click="handleClose">关闭</el-button>
          </div>
        </div>
        <div style="flex: 1">
          <el-tabs type="card" style="height: 100%">
            <el-tab-pane label="站点信息" style="height: 100%">
              <el-form
                :model="formData"
                size="small"
                inline
                :disabled="pageType == 'view'"
              >
                <div class="station-info">
                  <!-- 第一段 -->
                  <div class="title">基础信息</div>
                  <div class="panel">
                    <div class="" style="width: 45%">
                      <!-- 图片 -->
                      <div
                        class="carousel-box"
                        :class="{
                          hasUpdate: changedFields.includes('photos'),
                        }"
                      >
                        <el-upload
                          v-model:file-list="formData.photos"
                          class="avatar-uploader"
                          :action="`${baseUrl}/upload/index`"
                          :show-file-list="false"
                          multiple
                          :limit="10"
                          :on-success="handleAvatarSuccess"
                        >
                          <img
                            class="img"
                            src="@/assets/images/icon/upload.png"
                            alt=""
                          />
                        </el-upload>
                        <!-- 删除 -->
                        <el-carousel :interval="5000" arrow="always">
                          <el-carousel-item
                            height="200px"
                            v-for="item in formData.photos"
                            :key="item.uid"
                          >
                            <img style="width: 100%" :src="item.url" alt="" />
                            <el-button
                              class="delete-btn"
                              type="danger"
                              icon="Delete"
                              circle
                              @click="handleDeletePhoto(item)"
                            />
                          </el-carousel-item>
                        </el-carousel>
                      </div>
                    </div>
                    <div style="margin-left: 12px; width: 27%">
                      <el-form-item label="所属街道">
                        <el-select
                          v-model="formData.street_id"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('street_id'),
                          }"
                          @change="handleStreetChange"
                        >
                          <el-option
                            v-for="item in streetOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="居委区域编号">
                        <el-select
                          v-model="formData.committee_id"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('committee_id'),
                          }"
                        >
                          <el-option
                            v-for="item in committeeOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="地址">
                        <el-input
                          v-model="formData.address"
                          :class="{
                            hasUpdate: changedFields.includes('address'),
                          }"
                        >
                          <template #suffix>
                            <img
                              @click.stop="handleFindAddress"
                              style="width: 16px; cursor: pointer"
                              src="@/assets/images/icon/dingwei_icon.png"
                              alt=""
                            />
                          </template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="所有权归属">
                        <el-select
                          v-model="formData.ownership_category"
                          placeholder="请选择"
                          :class="{
                            hasUpdate:
                              changedFields.includes('ownership_category'),
                          }"
                        >
                          <el-option label="产权-普环" value="产权-普环" />
                          <el-option label="租赁" value="租赁" />
                          <el-option label="产权-区局" value="产权-区局" />
                          <el-option label="其他" value="其他" />
                        </el-select>
                      </el-form-item>

                      <el-form-item label="取得产证日期">
                        <el-date-picker
                          v-model="formData.property_certificate_date"
                          value-format="YYYY-MM-DD"
                          type="date"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'property_certificate_date'
                            ),
                          }"
                        />
                      </el-form-item>
                      <el-form-item label="使用协议签订对象">
                        <el-input
                          v-model="formData.agreement_party"
                          :class="{
                            hasUpdate:
                              changedFields.includes('agreement_party'),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="首次协议签订日期">
                        <el-date-picker
                          v-model="formData.first_agreement_date"
                          value-format="YYYY-MM-DD"
                          type="date"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'first_agreement_date'
                            ),
                          }"
                        />
                      </el-form-item>
                      <el-form-item label="协议期限">
                        <el-input
                          v-model="formData.agreement_period"
                          :class="{
                            hasUpdate:
                              changedFields.includes('agreement_period'),
                          }"
                          placeholder="输入协议期限"
                          style="width: 100%"
                          size="small"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="停车场名称">
                        <el-input
                          v-model="formData.parking_name"
                          :class="{
                            hasUpdate: changedFields.includes('parking_name'),
                          }"
                          placeholder="输入停车场名称"
                          style="width: 100%"
                          size="small"
                        ></el-input>
                      </el-form-item>
                    </div>
                    <div style="margin-left: 12px; width: 27%">
                      <el-form-item label="停车场类型">
                        <el-select
                          v-model="formData.parking_type"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('parking_type'),
                          }"
                        >
                          <el-option label="绿化" value="绿化" />
                          <el-option label="环卫" value="环卫" />
                          <el-option label="其他" value="其他" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="停车场造价(元)">
                        <el-input-number
                          :min="null"
                          :step="0.01"
                          :precision="2"
                          :controls="false"
                          v-model="formData.construction_cost"
                          :class="{
                            hasUpdate:
                              changedFields.includes('construction_cost'),
                          }"
                        ></el-input-number>
                      </el-form-item>
                      <el-form-item label="停车场占地面积(m²)">
                        <el-input-number
                          :min="null"
                          :step="0.01"
                          :precision="2"
                          :controls="false"
                          v-model="formData.land_area"
                          :class="{
                            hasUpdate: changedFields.includes('land_area'),
                          }"
                        ></el-input-number>
                      </el-form-item>
                      <el-form-item label="停车场使用面积(m²)">
                        <el-input-number
                          :min="null"
                          :step="0.01"
                          :precision="2"
                          :controls="false"
                          v-model="formData.usable_area"
                          :class="{
                            hasUpdate: changedFields.includes('usable_area'),
                          }"
                        ></el-input-number>
                      </el-form-item>
                      <el-form-item label="启用日期">
                        <el-date-picker
                          v-model="formData.activation_date"
                          value-format="YYYY-MM-DD"
                          type="date"
                          placeholder="请选择"
                          :class="{
                            hasUpdate:
                              changedFields.includes('activation_date'),
                          }"
                        />
                      </el-form-item>
                      <el-form-item label="运营单位">
                        <el-select
                          v-model="formData.operator_id"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('operator_id'),
                          }"
                        >
                          <el-option
                            v-for="item in operatorOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="运营单位负责人">
                        <el-input
                          v-model="formData.operator_leader"
                          :class="{
                            hasUpdate:
                              changedFields.includes('operator_leader'),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="负责人联系方式">
                        <el-input
                          v-model="formData.operator_leader_contact"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'operator_leader_contact'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="维修车间面积(m²)">
                        <el-input-number
                          :min="null"
                          :step="0.01"
                          :precision="2"
                          :controls="false"
                          v-model="formData.repair_area"
                          :class="{
                            hasUpdate: changedFields.includes('repair_area'),
                          }"
                        ></el-input-number>
                      </el-form-item>
                    </div>
                  </div>

                  <!-- 第二段 -->
                  <div class="title">设施及使用信息</div>
                  <div class="panel" style="flex-direction: column">
                    <div class="flex">
                      <el-form-item label="可停放车辆数">
                        <el-input-number
                          :min="null"
                          :max="999"
                          :step="1"
                          :precision="0"
                          :controls="false"
                          v-model="formData.vehicle_capacity"
                          :class="{
                            hasUpdate:
                              changedFields.includes('vehicle_capacity'),
                          }"
                        ></el-input-number>
                      </el-form-item>
                      <el-form-item label="燃油车">
                        <el-input-number
                          :min="null"
                          :max="999"
                          :step="1"
                          :precision="0"
                          :controls="false"
                          v-model="formData.fuel_vehicles"
                          :class="{
                            hasUpdate: changedFields.includes('fuel_vehicles'),
                          }"
                        ></el-input-number>
                      </el-form-item>
                      <el-form-item label="电车">
                        <el-input-number
                          :min="null"
                          :max="999"
                          :step="1"
                          :precision="0"
                          :controls="false"
                          v-model="formData.electric_vehicles"
                          :class="{
                            hasUpdate:
                              changedFields.includes('electric_vehicles'),
                          }"
                        ></el-input-number>
                      </el-form-item>
                      <el-form-item label="机具">
                        <el-input-number
                          :min="null"
                          :max="999"
                          :step="1"
                          :precision="0"
                          :controls="false"
                          v-model="formData.machines"
                          :class="{
                            hasUpdate: changedFields.includes('machines'),
                          }"
                        ></el-input-number>
                      </el-form-item>
                      <el-form-item label="工作人员">
                        <el-input-number
                          :min="null"
                          :max="999"
                          :step="1"
                          :precision="0"
                          :controls="false"
                          v-model="formData.staff_count"
                          :class="{
                            hasUpdate: changedFields.includes('staff_count'),
                          }"
                        ></el-input-number>
                      </el-form-item>
                    </div>
                    <div class="flex">
                      <el-form-item label="工作人员男女比例">
                        <el-input
                          v-model="formData.staff_description"
                          :class="{
                            hasUpdate:
                              changedFields.includes('staff_description'),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="维修车间" style="width: 260px">
                        <el-select
                          v-model="formData.repair_workshop"
                          placeholder=""
                          :class="{
                            hasUpdate:
                              changedFields.includes('repair_workshop'),
                          }"
                        >
                          <el-option label="有" value="有" />
                          <el-option label="无" value="无" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="维修车间设备具体说明">
                        <el-input
                          v-model="formData.repair_equipment_details"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'repair_equipment_details'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                    </div>
                    <div class="flex">
                      <el-form-item label="维修间可进行的维修业务">
                        <el-input
                          v-model="formData.repair_services"
                          :class="{
                            hasUpdate:
                              changedFields.includes('repair_services'),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="维修工人数" style="width: 350px">
                        <el-input-number
                          :min="null"
                          :max="999"
                          :step="1"
                          :precision="0"
                          :controls="false"
                          v-model="formData.repair_workers"
                          :class="{
                            hasUpdate: changedFields.includes('repair_workers'),
                          }"
                        ></el-input-number>
                      </el-form-item>
                      <el-form-item label="维修工持证情况">
                        <el-input
                          v-model="formData.repair_certification"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'repair_certification'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                    </div>
                    <div class="flex">
                      <el-form-item label="车辆清洗设备" style="width: 260px">
                        <el-select
                          v-model="formData.vehicle_wash_equipment"
                          placeholder=""
                          :class="{
                            hasUpdate: changedFields.includes(
                              'vehicle_wash_equipment'
                            ),
                          }"
                        >
                          <el-option label="有" value="有" />
                          <el-option label="无" value="无" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="清洗设备具体说明">
                        <el-input
                          v-model="formData.wash_equipment_details"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'wash_equipment_details'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="冲洗水是否外运" style="width: 260px">
                        <el-select
                          v-model="formData.wash_water_external"
                          placeholder=""
                          :class="{
                            hasUpdate: changedFields.includes(
                              'wash_water_external'
                            ),
                          }"
                        >
                          <el-option label="是" value="是" />
                          <el-option label="否" value="否" />
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="flex">
                      <el-form-item label="冲洗水去向">
                        <el-input
                          v-model="formData.wash_water_destination"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'wash_water_destination'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="冲洗水外运频率">
                        <el-input
                          v-model="formData.wash_water_frequency"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'wash_water_frequency'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="冲洗水月外运吨位数">
                        <el-input
                          v-model="formData.wash_water_monthly_tonnage"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'wash_water_monthly_tonnage'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="车辆充电设备" style="width: 260px">
                        <el-select
                          v-model="formData.vehicle_charging_equipment"
                          placeholder=""
                          style="width: 120px"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'vehicle_charging_equipment'
                            ),
                          }"
                        >
                          <el-option label="有" value="有" />
                          <el-option label="无" value="无" />
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="flex">
                      <el-form-item label="充电设备所属单位">
                        <el-input
                          v-model="formData.charging_equipment_owner"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'charging_equipment_owner'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="充电桩个数" style="width: 300px">
                        <el-input
                          v-model="formData.charging_pile_count"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'charging_pile_count'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="充电桩类型" style="width: 300px">
                        <el-select
                          v-model="formData.charging_pile_type"
                          placeholder=""
                          :class="{
                            hasUpdate:
                              changedFields.includes('charging_pile_type'),
                          }"
                        >
                          <el-option label="站式" value="站式" />
                          <el-option label="坐式" value="坐式" />
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="flex">
                      <el-form-item label="充电桩每月电费(元)">
                        <el-input
                          v-model="formData.charging_monthly_electricity_cost"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'charging_monthly_electricity_cost'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="每日充电车辆数">
                        <el-input
                          v-model="formData.daily_charging_vehicle_count"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'daily_charging_vehicle_count'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="机具充电设施">
                        <el-select
                          v-model="formData.machine_charging_facility"
                          placeholder=""
                          :class="{
                            hasUpdate: changedFields.includes(
                              'machine_charging_facility'
                            ),
                          }"
                        >
                          <el-option label="有" value="有" />
                          <el-option label="无" value="无" />
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="flex">
                      <el-form-item label="充电设施个数">
                        <el-input
                          v-model="formData.machine_charging_facility_count"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'machine_charging_facility_count'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="每天充电机具数">
                        <el-input
                          v-model="formData.daily_charging_machine_count"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'daily_charging_machine_count'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="充电设施具体说明">
                        <el-input
                          v-model="formData.machine_charging_description"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'machine_charging_description'
                            ),
                          }"
                        ></el-input>
                      </el-form-item>
                    </div>
                    <div class="box2">
                      <div class="title">其他需备注内容</div>
                      <el-input
                        v-model="formData.other_notes"
                        :class="{
                          hasUpdate: changedFields.includes('other_notes'),
                        }"
                        type="textarea"
                        :rows="3"
                        class="input5"
                        placeholder="请输入备注"
                      />
                    </div>
                  </div>
                </div>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <CustomDialog ref="customDialogRef" @confirm="handleDeleteConfirm" />
  </el-drawer>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import StationMap from "./stationMap.vue";
import CustomDialog from "@/components/customDialog.vue";
import {
  parkingLotsAdd,
  parkingLotsUpdate,
  parkingLotsDelete,
} from "@/api/parking_lots";
import { streetsList, operatorsList, getCommittees } from "@/api/index";
defineOptions({
  name: "StationDrawer",
});
const baseUrl = ref(import.meta.env.VITE_BASE_URL);
const visible = ref(false); // 是否显示
const pageType = ref("view"); // 是否编辑 add edit view
const stationMapRef = ref(null); // 地图组件引用
const currentRow = ref(null); // 当前行
const customDialogRef = ref(null); // 自定义弹框引用
const streetOptions = ref([]); // 街道选项
const committeeOptions = ref([]); // 居委区域选项
const operatorOptions = ref([]); // 运营单位选项
const changedFields = ref([]); // 修改的字段
const openType = ref(null); // 打开弹框时的类型
const auditType = ref(0); // 是否审核 1 未审核 2 已审核 0其他
const emit = defineEmits(["refresh"]);
onMounted(() => {
  streetsList({}).then((res) => {
    if (res.code == 0) {
      streetOptions.value = res.data || [];
    }
  });
  operatorsList({ project_id: 5 }).then((res) => {
    if (res.code == 0) {
      operatorOptions.value = res.data || [];
    }
  });
});
const formData = ref({
  id: null, // 主键ID
  street_id: null, // 所属街镇
  committee_id: null,
  address: null, // 地址
  longitude: null, // 经度
  latitude: null, // 纬度
  photos: [], // 照片 ['1','2']
  operator_id: null, // 运营单位ID
  ownership_category: null, // 所有权归属
  agreement_period: null, // 协议期限
  parking_name: null, // 停车场名称
  land_area: null, // 停车场占地面积(m²)
  usable_area: null, // 停车场使用面积(m²)
  activation_date: null, // 启用日期
  operator_leader: null, // 运营单位负责人
  operator_leader_contact: null, // 负责人联系方式
  repair_area: null, // 维修车间面积(m²)
  vehicle_capacity: null, // 可停放车辆数
  fuel_vehicles: null, // 燃油车
  electric_vehicles: null, // 电车
  machines: null, // 机具
  staff_count: null, // 工作人员
  staff_description: null, // 工作人员男女比例
  repair_workshop: null, // 维修车间
  repair_equipment_details: null, // 维修车间设备具体说明
  repair_services: null, // 维修间可进行的维修业务
  repair_workers: null, // 维修工人数
  repair_certification: null, // 维修工持证情况
  vehicle_wash_equipment: null, // 车辆清洗设备
  wash_equipment_details: null, // 清洗设备具体说明
  wash_water_external: null, // 冲洗水是否外运
  wash_water_destination: null, // 冲洗水去向
  wash_water_frequency: null, // 冲洗水外运频率
  wash_water_monthly_tonnage: null, // 冲洗水月外运吨位数
  vehicle_charging_equipment: null, // 车辆充电设备
  charging_equipment_owner: null, // 充电设备所属单位
  charging_pile_count: null, // 充电桩个数
  charging_pile_type: null, // 充电桩类型
  charging_monthly_electricity_cost: null, // 充电桩每月电费(元)
  daily_charging_vehicle_count: null, // 每日充电车辆数
  machine_charging_facility: null, // 机具充电设施
  machine_charging_facility_count: null, // 充电设施个数
  daily_charging_machine_count: null, // 每天充电机具数
  machine_charging_description: null, // 充电设施具体说明
  other_notes: null, // 其他需备注内容
});

const openDrawer = (row, type = "view", audit = 0) => {
  auditType.value = audit;
  pageType.value = type;
  openType.value = type;
  currentRow.value = row;
  if (row) {
    // 如果formData.street_id，则获取居委区域
    if (row.street_id) {
      handleStreetChange(row.street_id);
    }
    formData.value = { ...row };
    if (typeof row.changed_fields === "object" && audit == 1) {
      changedFields.value = Object.keys(row.changed_fields);
    } else {
      changedFields.value = [];
    }
  } else {
    formData.value = {
      id: null, // 主键ID
      street_id: null, // 所属街镇
      committee_id: null,
      address: null, // 地址
      longitude: null, // 经度
      latitude: null, // 纬度
      photos: [], // 照片 ['1','2']
      operator_id: null, // 运营单位ID
      ownership_category: null, // 所有权归属
      agreement_period: null, // 协议期限
      parking_name: null, // 停车场名称
      land_area: null, // 停车场占地面积(m²)
      usable_area: null, // 停车场使用面积(m²)
      activation_date: null, // 启用日期
      operator_leader: null, // 运营单位负责人
      operator_leader_contact: null, // 负责人联系方式
      repair_area: null, // 维修车间面积(m²)
      vehicle_capacity: null, // 可停放车辆数
      fuel_vehicles: null, // 燃油车
      electric_vehicles: null, // 电车
      machines: null, // 机具
      staff_count: null, // 工作人员
      staff_description: null, // 工作人员男女比例
      repair_workshop: null, // 维修车间
      repair_equipment_details: null, // 维修车间设备具体说明
      repair_services: null, // 维修间可进行的维修业务
      repair_workers: null, // 维修工人数
      repair_certification: null, // 维修工持证情况
      vehicle_wash_equipment: null, // 车辆清洗设备
      wash_equipment_details: null, // 清洗设备具体说明
      wash_water_external: null, // 冲洗水是否外运
      wash_water_destination: null, // 冲洗水去向
      wash_water_frequency: null, // 冲洗水外运频率
      wash_water_monthly_tonnage: null, // 冲洗水月外运吨位数
      vehicle_charging_equipment: null, // 车辆充电设备
      charging_equipment_owner: null, // 充电设备所属单位
      charging_pile_count: null, // 充电桩个数
      charging_pile_type: null, // 充电桩类型
      charging_monthly_electricity_cost: null, // 充电桩每月电费(元)
      daily_charging_vehicle_count: null, // 每日充电车辆数
      machine_charging_facility: null, // 机具充电设施
      machine_charging_facility_count: null, // 充电设施个数
      daily_charging_machine_count: null, // 每天充电机具数
      machine_charging_description: null, // 充电设施具体说明
      other_notes: null, // 其他需备注内容
    };
    changedFields.value = [];
  }
  visible.value = true;
};
const onSubmit = () => {
  let o = {
    ...formData.value,
  };
  let api = parkingLotsAdd;
  if (currentRow.value?.id) {
    api = parkingLotsUpdate;
    o.id = currentRow.value?.id;
  }
  api(o)
    .then((res) => {
      if (res.code == 0) {
        ElMessage.success("操作成功");
        handleClose();
        // 刷新列表
        emit("refresh");
      }
    })
    .catch(() => {
      ElMessage.error("操作失败");
    });
};
const handleClose = () => {
  visible.value = false;
};
// 编辑
const handleEdit = (type) => {
  console.log(type, "type");
  if (type) {
    pageType.value = type;
    return;
  }
  console.log(pageType.value, "type");
  if (pageType.value == "add") {
    handleClose();
    return;
  } else if (pageType.value == "edit") {
    if (openType.value == "edit") {
      handleClose();
      return;
    }
    pageType.value = "view";
  } else if (pageType.value == "view") {
    handleClose();
  }
};

// 上传图片
const handleAvatarSuccess = (res, file) => {
  console.log(res, file);
  file.url = res.data.url;
  if (res.code == 0) {
    // formData.value.photos.push(res.data.url);
  }
};

// 删除图片
const handleDeletePhoto = (item) => {
  formData.value.photos = formData.value.photos.filter((i) => i !== item);
};

// 删除
const handleDelete = () => {
  customDialogRef.value.openDialog("del");
  // ElMessageBox.confirm("确定删除吗？", "提示", {
  //   confirmButtonText: "确定",
  //   cancelButtonText: "取消",
  //   type: "warning",
  // }).then(() => {
  //   console.log("删除");
  // });
};

// 执行删除逻辑
const handleDeleteConfirm = () => {
  console.log("执行删除逻辑");
  parkingLotsDelete({ id: currentRow.value.id }).then((res) => {
    if (res.code == 0) {
      ElMessage.success("删除成功");
      handleClose();
      // 刷新列表
      emit("refresh");
    }
  });
};

// 查找地址
const handleFindAddress = () => {
  let address = formData.value.address;
  if (!address) {
    ElMessage.error("请输入地址");
    return;
  }
  stationMapRef.value.setAddress(address);
};

// 处理位置
const handleLocation = (location) => {
  console.log(location, "location 厕所 子组件传过来的经纬度");
  formData.value.longitude = location.lng;
  formData.value.latitude = location.lat;
};

// 街道选择改变
const handleStreetChange = (value) => {
  console.log(value, "value");
  formData.value.committee_id = null;
  if (value) {
    committeeOptions.value = [];
    getCommittees({ street_id: value }).then((res) => {
      if (res.code == 0) {
        committeeOptions.value = res.data || [];
      }
    });
  }
};

defineExpose({
  openDrawer,
});
</script>

<style scoped lang="scss">
@use "./station.scss" as *;
@use "../../index.scss" as *;
</style>
